import React, { Component } from 'react'
import axios from 'axios'

export default class Header extends Component {

  search=async()=>{
    const { isFirst,updateAppState } = this.props
    if(isFirst){
      updateAppState({isFirst:false})
    }
    updateAppState({isLoading:true})
    const { searchContent:{value:str} } = this
    let list,err
    try {
      let res=await axios.get('https://api.github.com/search/users?q='+str)
      list=res.data.items
      err=''
    } catch (error) {
      list=[]
      err=error.message
    }
    updateAppState({isLoading:false,list,err})
  }

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input ref={e=>this.searchContent=e} type="text" placeholder="enter the name you search"/>&nbsp;
          <button onClick={this.search}>Search</button>
        </div>
      </section>
    )
  }
}
